<script setup>
import { ElMessage } from "element-plus";
import Layer from "@/components/layer/index.vue";
import { defineProps, ref, defineEmits, onMounted } from "vue";
import {
  addAPI,
  updateAPI,
  updateUserApproval,
  updateAmountApproval,
  wxRefund,
} from "@/api/wedding/approvalInfo";
import { userAll } from "@/api/system/user";
import { dicVals } from "@/api/common";

// 使用defineEmits来接收来自父组件的方法
const emit = defineEmits(["getTableData"]);
// 声明props
const props = defineProps({
  layer: {
    type: Object,
    default: () => {
      return {
        show: false,
        title: "",
        showButton: true,
      };
    },
  },
});

/************************************定义变量************************************************/
const ruleForm = ref(null);
const layerDom = ref(null);
const rules = {
  status: [{ required: true, message: "请选择审批状态", trigger: "blur" }],
};
// const rules = {
//   businessType: [{ required: true, message: '请输入申请类型', trigger: 'blur' }],
//   businessId: [{ required: true, message: '请输入业务标识', trigger: 'blur' }],
//   remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
//   approver: [{ required: true, message: '请输入审批人', trigger: 'blur' }],
//   approverName: [{ required: true, message: '请输入审批人姓名', trigger: 'blur' }],
// }
let form = ref({
  id: null,
  businessType: null,
  businessId: null,
  appUserId: null,
  status: null,
  remark: null,
  creator: null,
  creatorName: null,
  approver: null,
  approverName: null,
  createTime: null,
  updateTime: null,
  delFlag: null,
  licenseUrl: null,
  contact: null,
  contactPhone: null,
  merchantType: null,
  merchantName: null,
  payName: null,
  payCode: null,
  payBank: null,




});

/************************************数据回显************************************************/
if (props.layer.row) {
  if (props.layer.row) {
    let source = props.layer.row;
    Object.keys(form.value).forEach((k) => k in source && (form.value[k] = source[k]));
  }
}

/************************************定义事件************************************************/
//提交按钮事件
let submit = () => {
  if (ruleForm) {
    ruleForm.value.validate((valid) => {
      if (valid) {
        let params = form.value;
        if (props.layer.row) {
          updateForm(params);
        } else {
          addForm(params);
        }
      } else {
        return false;
      }
    });
  }
};

let updateForm = (params) => {
  console.log("[ params ] >", params);
  if (params.businessType == "0") {
    // 商家入驻审批
    updateUserApproval(params).then((res) => {
      if (res.code != 0) {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      } else {
        ElMessage({
          type: "success",
          message: "审批成功",
        });
      }
      emit("getTableData", false);
      layerDom && layerDom.value.close();
    });
  } else if (params.businessType === "1") {
    // 提现申请审批
    updateAmountApproval(params).then((res) => {
      if (res.code != 0) {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      } else {
        ElMessage({
          type: "success",
          message: "审批成功",
        });
      }
      emit("getTableData", false);
      layerDom && layerDom.value.close();
    });
  } else if (params.businessType === "2") {
    // 退款申请审批
    wxRefund(params).then((res) => {
      if (res.code != 0) {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      } else {
        ElMessage({
          type: "success",
          message: "审批成功",
        });
      }
      emit("getTableData", false);
      layerDom && layerDom.value.close();
    });
  }
};

let addForm = (params) => {
  addAPI(params).then((res) => {
    ElMessage({
      type: "success",
      message: "新增成功",
    });
    emit("getTableData", true);
    layerDom && layerDom.value.close();
  });
};
/************************************获取用户列表************************************************/
// 字典初始化start
const busTypeList = ref([]);
const initDicts = async () => {
  const res = await dicVals("bus_type");
  busTypeList.value = res.data;
  console.log("[ busTypeList ] >", busTypeList);
};
// 字典初始化end
const userList = ref([]);
onMounted(async () => {
  // 获取用户列表
  // userAll().then((res) => {
  //   console.log("[ res ] >", res);
  //   userList.value = res.data;
  //   console.log("[ userList ] >", userList);
  // });
  await initDicts();
});
</script>

<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <!-- 商家入驻审批 -->
    <el-form
      v-if="layer.title === '商家入驻审批'"
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      style="margin-right: 30px"
    >
      <el-form-item label="审批申请账号：" prop="creatorName">
        <el-input v-model="form.creatorName" disabled></el-input>
      </el-form-item>
      <el-form-item label="申请类型：" prop="businessType">
        <el-select v-model="form.businessType" placeholder="请选择申请类型" disabled>
          <el-option label="商家入驻" value="0"></el-option>
          <el-option label="提现申请" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item label="审批：" prop="status">
        <t-radio-group v-model="form.status">
          <t-radio value="1">通过</t-radio>
          <t-radio value="2">驳回</t-radio>
        </t-radio-group>
      </el-form-item>
      <!-- <el-form-item label="审批人：" prop="approver">
        <el-select v-model="form.approver" placeholder="请选择审批人">
          <el-option v-for="item in userList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
        </el-select>
      </el-form-item> -->
    </el-form>
    <!-- 查看商家信息 -->
    <el-form
      v-if="layer.title === '查看商家信息'"
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      style="margin-right: 30px"
    >
      <el-form-item label="商家类型："  v-if="form.businessType === '0'" prop="merchantType">
        <el-select v-model="form.merchantType"  placeholder="请选择业务类型" disabled>
          <el-option
            v-for="item in busTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商家名称："  v-if="form.businessType === '0'" prop="merchantName">
        <el-input v-model="form.merchantName" disabled></el-input>
      </el-form-item>
      <el-form-item label="联系人："  v-if="form.businessType === '0'" prop="contact">
        <el-input v-model="form.contact" disabled></el-input>
      </el-form-item>
      <el-form-item label="联系电话："  v-if="form.businessType === '0'" prop="contactPhone">
        <el-input v-model="form.contactPhone" disabled></el-input>
      </el-form-item>
      <el-form-item label="营业执照："  v-if="form.businessType === '0'" prop="licenseUrl">
        <t-image
          v-if="form.licenseUrl"
          :src="form.licenseUrl"
          mode="aspectFill"
          aria-label="图片"
        />
      </el-form-item>

      <el-form-item  label="收款人姓名"  v-if="form.businessType != '0'" name="payName">
        <el-input  v-model="form.payName" disabled placeholder="请输入收款人姓名"></el-input>
      </el-form-item>
        <el-form-item label="银行卡账号"  v-if="form.businessType != '0'"   name="payCode">
          <el-input  v-model="form.payCode" disabled placeholder="请输入银行卡账号"></el-input>
        </el-form-item>
          <el-form-item  label="银行开户行"  v-if="form.businessType != '0'"  name="payBank">
            <el-input   v-model="form.payBank" disabled placeholder="请输入银行开户行"></el-input>
          </el-form-item>

      <!-- <el-form-item label="审批人：" prop="approver">
        <el-select v-model="form.approver" placeholder="请选择审批人">
          <el-option v-for="item in userList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
        </el-select>
      </el-form-item> -->
    </el-form>
    <!-- <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" style="margin-right:30px;">
      <el-form-item label="申请类型：" prop="businessType">
        <el-select v-model="form.businessType" placeholder="请选择申请类型">
          <el-option label="商家入驻" value="0"></el-option>
          <el-option label="提现申请" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务标识：" prop="businessId">
        <el-input v-model="form.businessId" placeholder="请输入业务标识"></el-input>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item label="审批人：" prop="approver">
        <el-select v-model="form.approver" placeholder="请选择审批人">
          <el-option v-for="item in userList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form> -->
  </Layer>
</template>

<style scoped lang="scss">
.el-input-number--large {
  line-height: 38px;
  width: 230px;
}
</style>
